<template>
  <div class="hello">
    <div class="mainWrp" id="app">
        <div class="carousel" @mouseenter="mouseEnter" @mouseleave="mouseOut">
            <ul class="imgsWrp clear" ref='imgsWrp' :style="'width:'+ lens * 100 + '%'">
                <li v-for="(item, index) in imgsArray" :style="'width:'+ 100 / lens + '%'" ref='imgs' :key="index">
                    <img :src="item.img1" alt="" />
                    <img :src="item.img2" alt="" />
                </li>
            </ul>
            <span class="clickBtns pre" @click="switchImg(-1)">&lt;</span>
            <span class="clickBtns next" @click="switchImg(-2)">&gt;</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
    data() {
      return {
        imgsArray: [
          {
            img1: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471547420&di=8b8eebe7e6db18fbecb431942ea7a7f1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58b0f59928b5d.jpg",
            img2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471613931&di=f03759473bf79c9aaea8e0aef999d3e4&imgtype=0&src=http%3A%2F%2Fpic26.nipic.com%2F20130122%2F5056611_171645641000_2.jpg"
          },{
            img1: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471625301&di=03e9370991d8806ee5145df8376f87dd&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F586e154595341.jpg",
            img2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471639055&di=30f76e85ccda9af4dcef37fa80ed17ff&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-17%2F5a5f18f000ece.jpg"
          },{
            img1: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471653213&di=61a95e60bbce46454bf5d84bde2d42e3&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F18%2Fc1%2F12378628_1342603613470.jpg",
            img2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587471673946&di=9aef2505095a7734310455866de0e9da&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F57d76c4f28ad0.jpg"
          }
        ],
        lens: 0,        // 图片数组长度（组装后的数组，前后添加最后一张，后面添加第一张）
        current: 0,     // 当前页面index
        timer: null,    // 设置定时器，回到初始或者最后位置，每次用完设置为null，清除定时器
        autoSlide: null,   // 设置自动轮播时间器
        flag: true    // 设置开关阀，防止多次点击
      }
    },
    mounted() {
      let imgs = this.imgsArray;
      imgs.push(imgs[0]);       // 在图片数组前加上最后一张图
      imgs.unshift(imgs[this.imgsArray.length - 2]);         // 在图片数组后加上第一张图片
      let lens =  this.lens = imgs.length;
      this.imgsArray = imgs;
    },
    updated(){             // 在这个周期函数中才能调用到DOM元素，否则会获取到undefined
      let _this = this;
      _this.autoSlide = setInterval(function() {
        _this.switchImg(-2);
      }, 3000)
    },
    methods: {
      // 设置动画函数，无缝轮播
      animate(lens){
        let _this = this;
        _this.flag = false;
                
        _this.$refs.imgsWrp.style.transition="transform 700ms ease";                  
        _this.$refs.imgsWrp.style.transform = "translateX(" + -100 / lens * _this.current + "%)";

        _this.timer = setTimeout(function(){
          _this.flag = true;
        }, 700);      // 动画执行完才能再次点击
      },
      // 点击左右按钮实现轮播，index=-1：左；index=-2：右；
      switchImg(index){	
        let _this = this;
        _this.timer = null;
        if(!_this.flag) return;  // 防止连点
        if(index == -1){ // 点击上一张
          if(_this.current == 0){  // 如果是第一张
            clearTimeout(timer);
            clearTimeout(timer2);
            // 设置个定时器, 让轮播回到最后的位置
            var timer = setTimeout(() => {
                _this.current = _this.lens - 2;
                _this.$refs.imgsWrp.style.transition="none";          // 清除动画效果，回到最后位置
                _this.$refs.imgsWrp.style.transform = "translateX(" + -100 / _this.lens * _this.current + "%)";
            }, 10);
            var timer2 = setTimeout(function(){
              _this.current --;
              _this.animate(_this.lens);
            }, 20);     // 在回到最后位置后才执行上一张动画
          }else{
            _this.current --;
            _this.animate(_this.lens);
          }
        }else if(index == -2){ // 下一张
          if(_this.current + 1 == _this.lens){ // 如果是倒数第一张
            clearTimeout(timer);
            clearTimeout(timer2);
            // 设置个定时器, 让轮播回到最开始的位置
            var timer = setTimeout(() => {
                _this.current = 1;
                _this.$refs.imgsWrp.style.transition="none";
                _this.$refs.imgsWrp.style.transform = "translateX(" + -100 / _this.lens * _this.current + "%)";
            }, 10);
            var timer2 = setTimeout(function(){
              _this.current ++;
              _this.animate(_this.lens);
            }, 20);
          }else {
            _this.current ++;
            _this.animate(_this.lens);
          }
        }
      },
      mouseOut(){  // 鼠标离开，再次执行轮播
        this.autoSlide = setInterval(()=>{
          this.switchImg(-2);
        },2000)
      },
      mouseEnter(){ // 鼠标移入，暂停自动轮播
        clearInterval(this.autoSlide);
      }
    }
}
</script>


<style scoped>
  .hello{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .mainWrp {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
  }
  .clear::after {
    content: "";
    display: block;
    clear: both;
  }
  .carousel {
    position: relative;
  }
  .imgsWrp {
    display:flex;
    flex-flow:row nowrap;                        
  }
  .imgsWrp li {
    flex:1 1 auto;
    display: flex;
    justify-content: space-between;
  }
  .imgsWrp li img {
    width: 49.5%;
    height: 300px;
  }
  .clickBtns{
    display: block;
    width: 50px;
    height: 50px;
    background: #f3f3f3;
    opacity: .5;
    border-radius: 5px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    color: #0af;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    z-index: 99;
    cursor: pointer;
  }
  .pre{
    left: 20px;
  }
  .next{
    right: 20px;
  }
</style>
